/*
  学习目标：useState的基本使用
*/

// 1. 导入useState
import React, { useState } from 'react';

export default function App() {
  // 2. 调用useState, 得到状态变量和 更新状态的函数

  // 语法: const  [状态变量, 更新状态的函数] = useState(初始值)
  const [count, setCount] = useState(100);
  const [msg, setMsg] = useState('hello React');

  return (
    <div>
      {/* 3. 插值使用变量 */}
      <h1>{count}</h1>
      <h1>{msg}</h1>
      <button
        // 4. 绑定事件
        onClick={() => setCount(count + 1)}
      >
        点我+1
      </button>
      <button onClick={() => setMsg(msg + '~')}>点我+~</button>
    </div>
  );
}
